<template>
	<view class="content">
		<view class="info">
			<view class="title">现金要怎么使用呢?</view>
			<view class="left">
				<view :class="{hide:!isInfo}" class="policy">
					防疫政策:进小区需提供24小时核酸阴性证明，佩戴口罩,对居住在本小区（院落）的居民实行“两查”，即查健康码、查72小时核酸检测阴性证明。
				</view>
				<view class="showinfo" @tap="showinfo" v-if="!isInfo">
					<u-icon name="arrow-down" size="24"></u-icon>
				</view>
			</view>

			<view @tap="showinfo" v-if="isInfo" class="hidebtn">
				<u-icon name="arrow-up" color="#343434" size="24"></u-icon>
			</view>
		</view>

		<view class="info">
			<view class="title">现金要怎么使用呢?</view>
			<view class="left">
				<view :class="{hide:!isshow}" class="policy">
					现金可以在商城里购买对应商品，商城的商品比较化现金可以在商城里购买对应商品，商城的商品比较化现金可以在商城里购买对应商品，商城的商品比较化现金可以在商城里购买对应商品，商城的商品比较化
				</view>
				<view class="showinfo" @tap="show" v-if="!isshow">
					<u-icon name="arrow-down" size="24"></u-icon>
				</view>
			</view>

			<view @tap="show" v-if="isshow" class="hidebtn">
				<u-icon name="arrow-up" color="#343434" size="24"></u-icon>
			</view>
		</view>
	
		<view class="feedback" @click="feedback">
			<u-icon color='#1677FE' name="order" size="36"></u-icon>
			<text>意见反馈</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isInfo: false,
				isshow:false
			}
		},
		methods: {
			showinfo() {
				this.isInfo = !this.isInfo
			},
			show(){
				this.isshow=!this.isshow
			},
			feedback(){
				uni.navigateTo({
					url:"/pageB/helpFeedback/feedback"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 24rpx;
		box-sizing: border-box;
	}

	.info {
		border: 1rpx solid #CCCCCC;
		box-shadow: 0 6rpx 20rpx 0 #99999933;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 24rpx;
		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #333333;
		}

		.left {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.policy {
			text-align: justify;
			color: #999;
			font-size: 28rpx;
			line-height: 50rpx;
			word-break: break-word;
			box-sizing: border-box;
			margin: 24rpx 0;
		}

		.showinfo {
			font-size: 24rpx;
			margin-left: 24rpx;
		}
	}

	.hidebtn {
		font-size: 24rpx;
		text-align: right;
	}

	.hide {
		word-break: break-word;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.feedback{
		padding: 29rpx;
		text-align: center;
		background: #E8F1FE;
		color: #1677FE;
		font-size: 32rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		width: 100%;
		bottom: 68rpx;
	}
</style>